import React, { Component } from 'react';
import '../css/CreateCollection.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
import Dibu from './dibu'
@observer class CreateCollection extends Component {
    constructor(props) {
        super(props)
        this.state={
            active:1,
            //收藏的创意
            CreateSize:0,
            CreateTotal:1,
            Create:[],
            // 收藏的商品
            Shop:[]
        }
        this.CreateInterval=''
        this.ShopInterval=''
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/collect/list.jhtml?id='+Mobx.zhanghao+'&pageNumber=1')
            .then((item)=>{
                this.setState({
                    CreateSize:item.data.pageNumber,
                    CreateTotal:item.data.totalPage,
                    Create:item.data.cindex
                },()=>{
                    this.intervalCreate();
                })
            })
        axios.get('http://www.niuduxiu.com/mobile/product/favorite.jhtml?memberId='+Mobx.zhanghao)
            .then((item)=>{
                  this.setState({
                      Shop:item.data.returnValue
                  })
            })
    }
    intervalCreate(){
        if(this.state.CreateTotal<=this.state.CreateSize){
            return false;
        }else{
            this.CreateInterval=setInterval(()=>{
                if((document.documentElement.scrollTop||document.body.scrollTop)-document.body.scrollHeight>=-700){
                    clearInterval(this.CreateInterval)
                    this.setState({
                        CreateSize:this.state.CreateSize+1
                    },()=>{
                        this.loading();
                    })
                }
            },500)
        }
    }
    loading(){
        axios.get('http://www.niuduxiu.com/collect/list.jhtml?id='+Mobx.zhanghao+'&pageNumber='+this.state.CreateSize)
            .then((item)=>{
                this.setState({
                    CreateSize:item.data.pageNumber,
                    CreateTotal:item.data.totalPage,
                    Create:this.state.Create.concat(item.data.cindex)
                },()=>{
                    this.intervalCreate();
                })
            })
    }
    ChangeActive(item){
       if(item===2){
           clearInterval(this.CreateInterval)
       }else if(item===1){
           this.intervalCreate()
       }
        this.setState({
            active:item
        })
    }
    toDetail(item){
     this.props.history.push('/Detail/'+item.creativity.id)
    }
    render() {
        return (
            <div className="CreateCollection">
                <ul className='header'>
                    <li className={this.state.active===1?'active':''} onClick={this.ChangeActive.bind(this,1)}>收藏的创意</li>
                    <li className={this.state.active===2?'active':''} onClick={this.ChangeActive.bind(this,2)}>收藏的商品</li>
                </ul>
                <div  style={{display:this.state.active===1?"block":'none'}}>
                    <div  className='Create'>
                        {
                            this.state.Create.map((item,index)=>{
                                return(
                                    <div className='CreateCollectionOne' key={index} onClick={this.toDetail.bind(this,item)}>
                                        <div  className='left'>
                                            <img src={item.creativity.indexImage} alt=""/>
                                        </div>
                                        <div className='right'>
                                            <p className='title shengluehao'>{item.creativity.titleName}</p>
                                            <p className='content'>{item.creativity.reading}</p>
                                            <p className='caozuo'>
                                                <span>
                                                    <img src={require('../img/zan.png')} alt=""/> {item.creativity.browseCount}
                                                </span>
                                                <span>
                                                    <img src={require('../img/zan.png')} alt=""/> {item.creativity.likeCount}
                                                </span>
                                            </p>
                                        </div>
                                        <div className='x'>
                                            X
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <Dibu size={this.state.CreateSize} total={this.state.CreateTotal} />
                </div>
                <div  style={{display:this.state.active===2?"block":'none'}}>
                    <div  className='Create'>
                        {
                            this.state.Shop.map((item,index)=>{
                                return(
                                    <div className='CreateCollectionOne' key={index}>
                                        <div  className='left'>
                                            <img src={item.image} alt=""/>
                                        </div>
                                        <div className='right'>
                                            <p className='title shengluehao'>{item.name}</p>
                                            <p className='content'>{item.seoDescription}</p>
                                            <p className='price'>
                                                <span>
                                                    ￥{item.price}
                                                </span>
                                            </p>
                                        </div>
                                        <div className='x'>
                                            X
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <Dibu size='1' total='1' />
                </div>
            </div>
        );
    }
}

export default CreateCollection;
